<template>
  <div class="pay">
    <div class="pay__hj">
      <span>订单合计</span>
      <span style="color: #e31436">{{orderitem.orderamount|math-money}}</span>
    </div>
    <div class="pay__linetype1"></div>
    <div class="pay__paytype">
      <span>请选择支付方式</span>
    </div>
    <div class="pay__linetype2"></div>
    <div class="pay__alipay">
      <!--           -->
      <div class="
         pay__alipay__alipay">
        <img src="@image/pay-wx.png">
        <span>微信支付</span>
      </div>
      <div class="pay__select">
        <div class="selected-pay"></div>
      </div>
    </div>
    <div class="pay__paybutton">
      <button class="pay__button"
              @click="topay()">确认付款</button>
    </div>
  </div>
</template>


<script>
// const wx = require('weixin-js-sdk')
import mixins from '@/mixins'
export default {
  data () {
    return {
      orderitem: {}, // 订单数据
      payitem: {}, // 支付对象
      resultdata: {}, // 返回数据对象
      ordertype: 'OS' // 订单类型默认OS 即普通订单
    }
  },
  mixins: [mixins],
  props: {},
  mounted () {
    // 获取支付类型(不同种类商品不同ordertype)
    this.orderitem = JSON.parse(this.$route.query.orderitem || '{}')
    let query = this.orderitem
    if (query && query.length > 0) {
      this.ordertype = query.ordertype
    } else {
      this.ordertype = 'OS'
    }
    let code = this.user.openid
    this.payitem = {
      totalAmount: this.orderitem.orderamount,
      orderid: '',
      isCheck: '0',
      ordertype: this.ordertype,
      payid: this.orderitem.payid,
      paytype: '0',
      userid: this.user.userid,
      username: this.user.username,
      giveid: '',
      openid: code
    }
  },
  methods: {
    // http://ztm.emeker.com/pay-result?payTime=2018-11-05%2017%3A31%3A33&connectSys=OPENCHANNEL&
    // sign=3715DE0D340801B043E6ECEF3ED5B3B8&mid=898340149000005&settleDate=2018-11-05&
    // buyerId=oOUAZv1IvsivMs7iVzOWeNbZKVss&tid=88880001&cr=mPqE&totalAmount=1&attachedData=1&
    // notifyId=40cc7fd9-2662-4929-aa25-1b3572134f98&subBuyerId=oHunP0t-Dn4he2Vpax1vndKCZeMA&
    // subInst=UMS-MARKET&orderDesc=%E7%BE%8E%E5%A4%9A%E6%8B%BC-%E6%82%A6%E6%B4%BB%E7%BA%AF%E8%87%BB%E8%B0%83%E8%82%A4%E6%B0%B4&
    // seqId=00350200448N&merOrderId=3194PAY201811051731113670203&status=WAIT_BUYER_PAY&targetSys=WXPay
    // 支付代码
    async payTest () {
      let data = await this.$ajax.get('/pay/getPayObj.json', {
        orderid: this.orderitem.orderid,
        resulturl: 'http://ztm.emeker.com/pay-result',
        paytype: 'UN'
      })
      if (data.paytype === 'UN') {
        window.location.href = data.payurl
      }
      self.payitem.paytype = '2'
    },
    // 支付方法
    async topay () {
      let self = this
      // this.payCallBack()
      if (self.$env.isWX === false) {
        // 不在微信中 表示微信外部调用支付
        // this.payCallBack()setTimeout
        let self = this
        try {
          await this.payCallBack()
          self.$router.push({name: 'pay-result', query: {orderid: this.orderitem.orderid, status: '0'}})
        } catch (e) {
          this.$toast(e)
        }
      } else {
        // 在微信中调用
        this.payTest()
      }
    },
    async payCallBack () {
      try {
        await this.$ajax.put('/tOrder/payBack.json', {
          orderid: this.orderitem.orderid
        })
        this.$router.push({name: 'pay-result', query: {orderid: this.orderitem.orderid, status: '0'}})
      } catch (e) {
        console.error(e)
        this.$toast(e)
      }
    },
    getpayObject () {
      let self = this
      if (self.$env.isWX === false) {
        // 在微信外部调用微信支付,调用微信H5支付
      } else {
        // 在微信内部调用微信支付,调用微信公众号支付
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.pay {
  img {
    width: 60px;
    height: 60px;
  }

  .pay__hj {
    height: 92px;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
  }

  .pay__linetype1 {
    width: 100%;
    height: 20px;
    background-color: #f8f8f8;
  }

  .pay__paytype {
    width: 90%;
    height: 100px;
    display: flex;
    align-items: center;
    color: #333333;
    font-size: 30px;
    padding-left: 20px;
  }

  .pay__linetype2 {
    width: 100%;
    height: 1px;
    background-color: #e6e6e6;
  }

  .pay__alipay {
    height: 90px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    justify-content: space-between;

    .pay__alipay__alipay {
      display: flex;
      font-size: 24px;
      align-items: center;

      span {
        margin-left: 15px;
      }
    }
  }

  .pay__wxpay {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;

    .pay__wxpay__wxpay {
      font-size: 24px;
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
      }
    }
  }

  .pay__select {
    margin-right: 23px;
    width: 30px;
    height: 30px;
    display: flex;

    img {
      width: 100%;
      height: 100%;
    }

    .selected-pay {
      background-image: url('~@image/icon_click.png');
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }
  }

  .pay__paybutton {
    width: 100%;
    height: 80px;
    margin-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pay__button {
    width: 640px;
    height: 80px;
    background-color: #f25f15;
    border-radius: 8px;
    font-size: 34px;
    color: #ffffff;
    border: none;
  }
}
</style>
